import { useRef, useState } from "preact/hooks";
import { getUid } from "../../common/utils";


export function TxtMsg(prop: { msg: string }) {
  const { msg } = prop;
  return (
    <div class={"msg-txt"}>
      {/* <div></div> */}
      {msg}
    </div>
  );
}

export function ImgMsg(prop: { src: string }) {
  const { src } = prop;
  return (
    <div class={"msg-img"}>
      <img src={src} />
    </div>
  );
}

export function BaseInfoControl(prop: { updData: any}) {
  const [ open, setOpen ] = useState(true)
  const [ baseInfo, setInfo ] = useState({
    name: '姚舒真',
    avatar: 'https://img95.699pic.com/element/40113/0358.png_860.png',
    startTime: '2025-03-02 20:45',
    mode: 'e-home',
    chatMode: 'Q'
  })

  const updInfo = () => {
    console.log(baseInfo);
    prop.updData(baseInfo)
  }
  const fileChange = (e:any) => {
    setInfo({
      ...baseInfo,
      avatar: URL.createObjectURL(e.target.files[0])
    })
  }
  // 通用事件处理函数
const handleChange = (e:any) => {
  const { name, value } = e.target;
  setInfo(prevState => ({
    ...prevState,
    [name]: value  // 动态更新字段
  }));
};
  return (
    <div className={`base-info-control `}>
      <div className={ 'title' } onClick={ () => setOpen(!open) }>基本信息设置</div>
      <div class={ `msg-box ${open ? '' : 'close'}` }>
      <div className={ `form` }>
        <div className={ 'form-item' }>
          <span>日期：</span>
          <input name="startTime" type="text" value={ baseInfo.startTime } onChange={handleChange}  />
        </div>
        <div className={ 'form-item' }>
          <span>昵称：</span>
          <input name="name" type="text" value={ baseInfo.name } onChange={handleChange}  />
        </div>
        <div className={ 'form-item' }>
          <span>头像：</span>
          <input type="file" onChange={ fileChange } />
        </div>
        <div className={ 'form-item' }>
          <span>模式：</span>
          {/* <input type="file" onChange={ fileChange } /> */}
          <select onChange={ handleChange } value={ baseInfo.mode } name="mode">
            <option value="wx">微信</option>
            <option value="e-home">E家</option>
          </select>
        </div>
        <div className={ 'form-item' }>
          <span>聊天方式：</span>
          {/* <input type="file" onChange={ fileChange } /> */}
          <select onChange={ handleChange } value={ baseInfo.chatMode } name="chatMode">
            <option value="Q">群聊</option>
            <option value="S">私聊</option>
          </select>
        </div>
        <div className={ 'form-item' }>
          <button className={'common-btn'} onClick={ updInfo }>更新</button>
        </div>
      </div>
      </div>
    </div>
  )
}

// 添加聊天记录
export function AddMsgControl(props: any) {
  const [ open, setOpen ] = useState(true)
  const [msgData, setMsgData] = useState({
    txt: '',
    fileUrl: '',
  })
  const fileRef = useRef(null)
  const sendMsg = (type: string) => {
    const b = {
      id: getUid(),
      type,
      content: type === 'text' ? msgData.txt : msgData.fileUrl
    }
    if (!b.content) {
      return alert('总得发点字或图吧')
    }
    props.send(b)
  }
  // 更新input
  const textInput = (e:any) => {
    setMsgData({
      ...msgData,
      txt: e.target.value
    })
  }
  // 文件选择
  const fileChose = (e:any) => {
    // avatar: URL.createObjectURL(e.target.files[0])
    // console.log(e.target.files[0]);
    setMsgData({
      ...msgData,
      fileUrl: URL.createObjectURL(e.target.files[0])
    })
  }
  // 粘贴
  const handlePaste = (e:any) => {
    const items = e.clipboardData || (window as any).clipboardData;
    if (!items) return;
    const list = items.items
    // 遍历剪贴板中的文件/图片
    for (let i = 0; i < list.length; i++) {
      const item = list[i];
      if (item.type.match('image')) {  // 图片类型
        const blob = item.getAsFile();
        const url = URL.createObjectURL(blob);
        setMsgData({
          ...msgData,
          fileUrl: url
        })
      }
    }
  }
  return (
    <div className={ 'msg-control' }>
      <div className={'title'} onClick={ () => setOpen(!open) }>发送聊天</div>
      <div className={ `msg-box ${open ? '' : 'close'}` }>
        <div className={'form'}>
          <div className={'form-item'}>
            <span>聊天内容：</span>
            <input type="text" value={msgData.txt} onChange={ textInput } />
            <button className={'common-btn'} onClick={() => sendMsg('text')}>发送</button>
          </div>
          <div className={'form-item'}>
            <span>发图片：</span>
            <input class="file" id="file-input" ref={fileRef} type="file" onInput={fileChose} />
            <button className={'common-btn'} onClick={() => (fileRef.current as any)?.click()}>选择图片</button>
            <div class="paste-content" contenteditable="true" onPaste={handlePaste}>
              粘贴图片
            </div>
            <img src={ msgData.fileUrl } alt="" />
            <button className={'common-btn'} onClick={() => sendMsg('image')}>发送</button>
          </div>
        </div>
      </div>
    </div>
  )
}

export function ScaleControl(prop: { updData: any, val: number}) {
  const [ open, setOpen ] = useState(true)
  // 通用事件处理函数
  const handleChange = (e:any) => {
    // console.log(e.target.value);
    prop.updData(Number(e.target.value))
  };
  return (
    <div className={`base-info-control `}>
      <div className={ 'title' } onClick={ () => setOpen(!open) }>聊天窗口放大倍率</div>
      <div class={ `msg-box ${open ? '' : 'close'}` }>
      <div className={ `form` }>
        <div className={ 'form-item' }>
          <span>放大倍率：</span>
          <input type="number" value={prop.val} onChange={handleChange}  />
        </div>
      </div>
      </div>
    </div>
  )
}